
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>翅膀昵称生成工具</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.head {
			padding: 15px
		}

		.title {
			text-align: center;
			color: #22ac38;
			font-size: 24px;
			font-weight: 400;
		}

		.sub_title {
			margin-top: .77em;
			margin-bottom: .3em;
			padding-left: 15px;
			padding-right: 15px;
			color: #999;
			font-size: 14px;
		}

		.res_textarea {
			display: block;
			border: 0;
			resize: none;
			width: 100%;
			color: inherit;
			font-size: 1em;
			line-height: inherit;
			outline: 0;
			background: #e9faf9;
			padding: 10px;
		}

		.input_textarea {
			background: #ffffff;
			border-top: 1px solid #999;
			border-bottom: 1px solid #999;
		}

		.btn-box {
			padding: 10px
		}

		#go {
			margin: 0;
			border: none;
			display: inline-block;
			padding: 0 1.32em;
			line-height: 2.3;
			font-size: 13px;
			background-color: #1aad19;
			color: #fff;
			border-radius: 4px;
		}

#oBox {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 50vh;
	z-index: 99;
}
.input_textarea {
		width: 80%;
		margin: 0 auto;
		border: 2px solid #eee!important;
}
	#oBox li{


    background: linear-gradient(right,#FE48D3,#BF3DC9);
    background: -ms-linear-gradient(right,#FE48D3,#BF3DC9);
    background: -webkit-linear-gradient(right,#FE48D3,#BF3DC9);
    background: -o-linear-gradient(right,#FE48D3,#BF3DC9);
    background: -moz-linear-gradient(right,#FE48D3,#BF3DC9);

	 width:200px;
   height:2em;
   border-radius:25px;
   text-align: center;
   vertical-align: middle;
   margin-left: 5%;
   font-size:0.8em;
   color: white;
   z-index: 999;

		float: left;
		width: 40%;
		text-align: center;
		margin-bottom: 20px;
	}

	#btn-box {
		margin:0 auto;
		width: 100%;
	}
	#go {
		margin:0 auto;
		width: 100px;
		text-align: center;
		display: block;
		background: linear-gradient(right,#FE48D3,#BF3DC9);
	 background: -ms-linear-gradient(right,#FE48D3,#BF3DC9);
	 background: -webkit-linear-gradient(right,#FE48D3,#BF3DC9);
	 background: -o-linear-gradient(right,#FE48D3,#BF3DC9);
	 background: -moz-linear-gradient(right,#FE48D3,#BF3DC9);
	}
	</style>


</head>
<body>

<div class="head">
	<h1 class="title">翅膀昵称生成工具</h1>
</div>



<div class="sub_title">
	请输入要转换的昵称
</div>

<textarea class="res_textarea input_textarea" placeholder="请输入您的昵称" id="code" style="background: #fff;" rows="2"></textarea>




<div class="btn-box">
	<input type="button" id="go" value="一键生成">
</div>
<div class="sub_title">
	点击下面文字直接复制
</div>

<textarea class="res_textarea" id="result" rows="4"></textarea>

<ul id="oBox">
	<li>꧁❀你❀꧂</li>

	<li>꧁༺༽༾ཊ你ཏ༿༼༻꧂</li>

	<li>꧁你꧂</li>

	<li>꧁༺❀你❀༻꧂</li>

	<li>༺❀你❀༻</li>

	<li>༺ཌ༈你༈ད༻</li>

	<li>༺你༻</li>

	<li>◢▂你▂◣</li>

	<li>圝◤你◥圝</li>

	<li>你ㄣ▄︻┳═一</li>

	<li>◥▇▇▇╋【战灬你</li>
</ul>
<script>


	(function () {


		let doS = document.querySelector('#go')
		let oCode = document.querySelector('#code')
		let oResult = document.querySelector('#result')
		doS.addEventListener('click',function() {

				var code = oCode.value;
				console.log(code)

				let str = `꧁❀${code}❀꧂`

				oResult.innerHTML = str
		})

		var el = document.querySelector('#result');
		var autoSelect = function (ev) {
			var t = ev.currentTarget;

			function select() {
				t.setSelectionRange(0, 9999);
			}

			select();
			setTimeout(select, 100);
		};
		el.addEventListener('focus', autoSelect, true);
		el.addEventListener('input', function (ev) {
				ev.currentTarget.value = ev.srcElement.defaultValue;
				autoSelect(ev);
		}, true);
	}());

</script>

<script type="text/javascript">
(function(){
		var colorList=document.getElementById("oBox");
		var colors=colorList.getElementsByTagName("li");

		let doS = document.querySelector('#go')
		let oCode = document.querySelector('#code')
		let oResult = document.querySelector('#result')

		colors[0].addEventListener('click',function() {
				var code = oCode.value;
				console.log(code)

				let str = `꧁❀${code}❀꧂`
				oResult.innerHTML = str
		})
		colors[1].addEventListener('click',function() {
				var code = oCode.value;
				console.log(code)

				let str = `꧁༺༽༾ཊ${code}ཏ༿༼༻꧂`
				oResult.innerHTML = str
		})
		colors[2].addEventListener('click',function() {
				var code = oCode.value;
				console.log(code)

				let str = `꧁${code}꧂`
				oResult.innerHTML = str
		})
		colors[3].addEventListener('click',function() {
				var code = oCode.value;
				console.log(code)

				let str = `꧁༺❀${code}❀༻꧂`
				oResult.innerHTML = str
		})
		colors[4].addEventListener('click',function() {
				var code = oCode.value;
				console.log(code)

				let str = `༺❀${code}❀༻`
				oResult.innerHTML = str
		})
		colors[5].addEventListener('click',function() {
				var code = oCode.value;
				console.log(code)

				let str = `༺ཌ༈${code}༈ད༻`
				oResult.innerHTML = str
		})
		colors[6].addEventListener('click',function() {
				var code = oCode.value;
				console.log(code)

				let str = `༺ཌ༈${code}༈ད༻`
				oResult.innerHTML = str
		})
		colors[7].addEventListener('click',function() {
				var code = oCode.value;
				console.log(code)

				let str = `◢▂${code}▂◣`
				oResult.innerHTML = str
		})
		colors[8].addEventListener('click',function() {
				var code = oCode.value;
				console.log(code)

				let str = `圝◤${code}◥圝`
				oResult.innerHTML = str
		})
		colors[9].addEventListener('click',function() {
				var code = oCode.value;
				console.log(code)

				let str = `${code}ㄣ▄︻┳═一`
				oResult.innerHTML = str
		})
		colors[10].addEventListener('click',function() {
				var code = oCode.value;
				console.log(code)

				let str = `◥▇▇▇╋【战灬${code}`
				oResult.innerHTML = str
		})


})();
</script>








<script type="text/javascript">

/**
 * Copyright (c) 2018 hustcc
 * License: yk
 * Version: %%GULP_INJECT_VERSION%%
 * GitHub: https://www.cnblogs.com/bbqq1314/
**/
! function() {
  //封装方法，压缩之后减少文件大小
  function get_attribute(node, attr, default_value) {
    return node.getAttribute(attr) || default_value;
  }
  //封装方法，压缩之后减少文件大小
  function get_by_tagname(name) {
    return document.getElementsByTagName(name);
  }
  //获取配置参数
  function get_config_option() {
    var scripts = get_by_tagname("script"),
      // script_len = "5px",

      script_len = scripts.length,
      script = scripts[script_len - 1];
         console.log(scripts.length);//当前加载的script
    return {
      l: script_len, //长度，用于生成id用
      z: get_attribute(script, "zIndex", -1), //z-index
      o: get_attribute(script, "opacity", 0.7), //opacity
      c: get_attribute(script, "color", "154,255,122"), //color
      n: get_attribute(script, "count", 99) //count
    };
  }
  //设置canvas的高宽
  function set_canvas_size() {
    canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  }

  //绘制过程
  function draw_canvas() {
    context.clearRect(0, 0, canvas_width, canvas_height);
    //随机的线条和当前位置联合数组
    var e, i, d, x_dist, y_dist, dist; //临时节点
    //遍历处理每一个点
    random_points.forEach(function(r, idx) {
      r.x += r.xa,
      r.y += r.ya, //移动
      r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1,
      r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界，反向反弹
      context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
      //从下一个点开始
      for (i = idx + 1; i < all_array.length; i++) {
        e = all_array[i];
        // 当前点存在
        if (null !== e.x && null !== e.y) {
          x_dist = r.x - e.x; //x轴距离 l
          y_dist = r.y - e.y; //y轴距离 n
          dist = x_dist * x_dist + y_dist * y_dist; //总距离, m

          dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
            d = (e.max - dist) / e.max,
            context.beginPath(),
            context.lineWidth = d*1,
            // context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")",
            context.strokeStyle = "rgba(255,74,74,1)",
            context.moveTo(r.x, r.y),
            context.lineTo(e.x, e.y),
            context.stroke());
        }
      }
    }), frame_func(draw_canvas);
  }
  //创建画布，并添加到body中
  var the_canvas = document.createElement("canvas"), //画布
    config = get_config_option(), //配置
    canvas_id = "c_n" + config.l, //canvas id
    context = the_canvas.getContext("2d"), canvas_width, canvas_height,
    frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) {
      // window.setTimeout(func, 1000 / 45);
      window.setTimeout(func, 10);
    }, random = Math.random,
    current_point = {
      x: null, //当前鼠标x
      y: null, //当前鼠标y
      max: 20000 // 圈半径的平方
    },
    all_array;
  the_canvas.id = canvas_id;
  the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
  get_by_tagname("body")[0].appendChild(the_canvas);

  //初始化画布大小
  set_canvas_size();
  window.onresize = set_canvas_size;
  //当时鼠标位置存储，离开的时候，释放当前位置信息
  window.onmousemove = function(e) {
    e = e || window.event;
    current_point.x = e.clientX;
    current_point.y = e.clientY;
  }, window.onmouseout = function() {
    current_point.x = null;
    current_point.y = null;
  };
  //随机生成config.n条线位置信息
  for (var random_points = [], i = 0; config.n > i; i++) {
    var x = random() * canvas_width, //随机位置
      y = random() * canvas_height,
      xa = 2 * random() - 1, //随机运动方向
      ya = 2 * random() - 1;
    // 随机点
    random_points.push({
      x: x,
      y: y,
      xa: xa,
      ya: ya,
      max: 6000 //沾附距离
    });
  }
  all_array = random_points.concat([current_point]);
  //0.1秒后绘制
  setTimeout(function() {
    draw_canvas();
  }, 100);
}();


</script>


</body>
</html>
